<template>
  <div id="body">
    <el-row>
      <el-col :span="1">
        <div class="grid-content bg-purple"> &nbsp;</div>
      </el-col>
      <el-col :span="21">
        <div class="grid-content bg-purple-light">
          <el-page-header @back="goBack" :content="passage.title">
          </el-page-header>
        </div>
        <div style="margin-top:20px;text-align: center;" type="text" class="userInfo">
          &nbsp;&nbsp;发布时间：{{ passage.createTime }}
        </div>
        <div style="margin-top:20px;" type="text" class="userInfo">
          &nbsp;&nbsp;{{ passage.summary }}
        </div>
        <div v-if="passage.picBody!=null" style="margin-top:20px;text-align: center;">
          <el-avatar shape="square" :size="500"
                     :src="'https://fileapi.ems.copyctrl.top/data/upload/images/'+passage.picBody"></el-avatar>
        </div>
        <div style="margin-top:20px" class="passage">
          <p><span v-html="passage.body"></span></p>
        </div>
        <div class="comment">
          <i class="el-icon-s-unfold" style="margin-right: 15px;margin-left:5px;font-size:15px"></i>所有评论
        </div>
        <el-card class="box-card" shadow="hover">
          <div v-for="comment in comments" class="text item">
            <div style="margin-top:0px" class="userInfo">
              <el-row>
                <el-col :span="20"><span>{{ comment.userInfo.name }}
            </span></el-col>
                <el-col :span="4"><span style="margin-left: 10px">{{ comment.createTime }}</span></el-col>
              </el-row>
            </div>
            <p class="passage">{{ comment.body }}</p>
            <el-divider></el-divider>
          </div>
        </el-card>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
import {mapState} from "vuex";

export default {
  name: "passageDetail",
  query: ['id'],
  computed: {
    ...mapState('userOptions', ['token', 'user']),
  },
  data() {
    return {
      passage: {
        user: {name: ''}
      },
      comments: []
    }
  },
  methods: {

    goBack() {
      this.$router.go(-1)
    },
    getPassageInfo() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      axios.get(`/api/admin/passage/detail/` + this.$route.query.id, {
        headers: {
          token: this.token
        }
      }).then(
          response => {
            if (response.data.code == 200) {
              this.passage = response.data.data.passage
              this.comments = response.data.data.comment
              loading.close();
            } else {
              loading.close();
              this.$message.error(response.data.errorMsg);
            }
          },
          error => {
            //请求失败
            loading.close();
            this.$message.error('服务繁忙');
          }
      )
    },
    send() {
      const message = JSON.stringify({
        uid: this.user.id,
        body: this.message,
        pid: this.passage.id,
        type: 0
      });
      axios.post(`http://zzc.copyctrl.top:7000/comment/` + message, {}, {
        headers: {
          token: this.token
        }
      }).then(
          response => {
            if (response.data.success) {
              this.$message({
                message: '发送成功',
                type: 'success'
              });
              this.message = ''
              this.dialogFormVisible = false
              this.findAllComments()
              console.log(this.comments)
            } else {
              this.$message.error(response.data.errorMsg);
            }
          },
          error => {
            //请求失败
            this.$message.error('服务繁忙');
          }
      )
    },
    findAllComments() {
      axios.get(`http://zzc.copyctrl.cn:7000/comment/0/` + this.passage.id, {
        headers: {
          token: this.token
        }
      }).then(
          response => {
            if (response.data.success) {
              this.comments = response.data.data
            } else {
              this.$message.error(response.data.errorMsg);
            }
          },
          error => {
            //请求失败
            this.$message.error('服务繁忙');
          }
      )
    }
  },
  mounted() {
    this.getPassageInfo()
  }
}
</script>

<style scoped>
.userInfo {
  text-decoration-color: #5e5e5e;
  font-size: 12px;
  color: #2e6da4;
}

.passage {
  font-size: 14px;
  line-height: 1.5
}

.comment {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
  text-align: left;
  font-size: 12px
}

.text {
  font-size: 14px;
}

.item {
  padding: 5px 0;
}

.el-card {
  border-radius: 4px;
  border: 1px solid #ebeef500;
  background-color: #fff0;
  overflow: hidden;
  color: #303133;
  transition: .3s;
}
</style>
